<template>
    <div class="pageWarp">
        <div class="dap_warp">
            <div class="dap_header">
                <div class="header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="header_centeer">贞一环境智慧运管中心</div>
                <div class="header_right">
                    <div>
                        <span>{{ timeYear }}</span>
                        <span class="text">年</span>
                        <span>{{ timeMonth }}</span>
                        <span class="text">月</span>
                        <span>{{ timeDay }}</span>
                        <span class="text">日</span>
                        <span class="pading">星期</span>
                        <span class="text">{{ currentWeek }}</span>
                        <span class="pading " style="display: inline-block;width: 100px;">{{ times }}</span>
                    </div>
                    <div style="padding-left: 10px;">
                        <Screenfull></Screenfull>
                    </div>
                    <div @click="mapClocse" class="img">
                        <img style="width: 100%;" src="../imgModel/mapclose.png" alt="">
                    </div>

                </div>
            </div>
            <div class="dap_bottom">
                <div class="dap_left">
                    <div class="mapleft_cardTop ">
                        <div class="maptitleTop">
                            <div>
                                水量监控
                            </div>
                        </div>
                        <div class="maptitleTopCeneter">
                            <div style="color: white;margin-top: 15px;" class="maptitleTopul">
                                <div class="maptitleTopLione" style="text-align: center;padding: 0;">
                                    站点名称
                                </div>
                                <div class="maptitleTopLi" style="text-align:center;padding: 0;">累计处理水量
                                </div>
                                <div class="maptitleTopLi" style="text-align:center;padding: 0;">
                                    实时处理水量
                                </div>
                                <div class="maptitleTopLi" style="text-align: center;padding: 0;">
                                    昨日处理水量
                                </div>
                            </div>
                            <!-- <div style="height: 50vh; overflow-x: hidden;  overflow-y: auto;" ref="scrollContainer"> -->
                            <AutoScrollModel height="47vh" :scrollSpeed="0.1" :bottomPause="1000" :smoothReturn="false"
                                :minDelta="0.1">
                                <!-- <div style="color: white;font-size: 18px;padding-left: 10px;" class="maptitleTopul">
                                    平桥区25个农污处理站点</div> -->
                                <div style="color: white;" class="maptitleTopul" :key="index"
                                    v-for="(item, index) of siteTotalFlowlist">
                                    <div class="maptitleTopLione" style="text-align: center;">
                                        <div class="maptable_li1Text">
                                            <el-tooltip :content="item.group_name" placement="top-start">
                                                <div class="maptable_li1Text"> {{ item.group_name }}</div>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                    <div class="maptitleTopLi" style="text-align:center;">{{
                                        item.cumulative }}
                                    </div>
                                    <div class="maptitleTopLi" style="text-align:center;">{{
                                        item.shunshi }}
                                    </div>
                                    <div class="maptitleTopLi" style="text-align: center;">{{
                                        item.yesterday
                                        }}
                                    </div>
                                </div>
                            </AutoScrollModel>
                            <!-- </div> -->
                        </div>
                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle">巡检记录</div>
                        <div class="maptableleft">
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">巡检人员</div>
                                <div class="maptable_li" style="text-align:center;">巡检内容</div>
                                <div class="maptable_li" style="text-align: right;">巡检时间</div>
                            </div>
                            <AutoScrollModel height="22vh" :scrollSpeed="0.1" :bottomPause="1000" :smoothReturn="false"
                                :minDelta="0.1">
                                <div class="maptable_list auto-scroll-row" :key="index"
                                    v-for="(item, index) of mapInspection">
                                    <div class="maptable_li" style="text-align: left;">{{ item.userName }}</div>
                                    <div class="maptable_li" style="text-align:center;">{{
                                        item.inspectionContent }}
                                    </div>
                                    <div class="maptable_li" style="text-align: right;">{{ item.inspectionDate }}</div>
                                </div>
                            </AutoScrollModel>
                        </div>
                    </div>
                </div>
                <div class="dap_center">
                    <div class="center_header">

                        <div class="center_img center_img1">
                            <div class="center_text">污水厂总数</div>
                            <div class="center_num">{{ isInfoForm.groups }}</div>
                        </div>
                        <div class="center_img center_img3">
                            <div class="center_text">运行站点</div>
                            <div class="center_num">{{ isInfoForm.onLineNum }}</div>
                        </div>
                        <div class="center_img center_img2">
                            <div class="center_text">离线站点</div>
                            <div class="center_num">
                                <el-tooltip placement="bottom">
                                    <div slot="content">
                                        <div :key="index" v-for="(item, index) of isInfoForm.outLineDevice">
                                            {{ item.deviceName }}</div>

                                    </div>
                                    <div> {{ isInfoForm.outLineNum }}</div>
                                </el-tooltip>

                            </div>
                        </div>
                        <!-- <div class="center_img center_img4">
                            <div class="center_text">关闭设备</div>
                            <div class="center_num">0</div>
                        </div> -->
                        <div class="center_img center_img5">
                            <div class="center_text">摄像头数</div>
                            <div class="center_num">{{ isInfoForm.sipNum }}</div>
                        </div>
                    </div>
                    <div class="center_food">
                        <MapChart :height="'70vh'" style="margin-top: 50px;" @mapviewBtn="mapviewBtnFun"></MapChart>
                        <div class="center_food_sel">
                            <div style="color: white;display: flex;justify-content: center;">
                                <div style="width: 100%;margin-top: 0px;position: relative;">
                                    <img style="width: 100%;height: 50px;" src="../imgUrl/site.png" alt="">
                                    <div
                                        style="display: flex;position:absolute;top: 0;padding-top: 10px;padding-left: 5px;">
                                        <div @click="arrowDownQvFun()"
                                            style="width: 200px;text-align: center;font-size: 18px;cursor: pointer;">
                                            {{ arrowDownQv }}</div>
                                        <div
                                            style="width: 100%;border-left: 1px solid #5C8AB7;position: relative;display: flex;">
                                            <div style="width:150px;">
                                                <el-input class="elIputGroup" @input="groupInput" v-model="groupName"
                                                    placeholder="请输入站点名称"></el-input>
                                            </div>
                                            <div @click="arrowDownFun()"
                                                style="position: absolute;right: 0;width: 20px;padding-top: 6px;">
                                                <i v-if="arrowDownData" class="el-icon-arrow-down"
                                                    style="font-size: 20px;"></i>
                                                <i v-else class="el-icon-arrow-up" style="font-size: 20px;"></i>
                                            </div>

                                        </div>
                                    </div>
                                    <div v-if="arrowDownDataQu" class="arrowDownUr">
                                        <div class="arrowDownLiQu"
                                            :class="{ 'arrowDownLiClick': arrowDownQvId == dict.value }"
                                            @click="arrowDownQu(dict)" v-for="dict in dict.type.district_selection"
                                            :key="dict.value" :label="dict.value">
                                            {{ dict.label }}
                                        </div>
                                    </div>
                                    <div style=" width: 500px;" v-if="arrowDownData" class="arrowDownUr">
                                        <div class="arrowDownLi" :class="{ 'arrowDownLiClick': arrowDownID == item.id }"
                                            :key="index" v-for="(item, index) of groupData">
                                            <div class="groupNameClass">
                                                {{ item.groupName }}
                                            </div>
                                            <div>
                                                <span @click="arrowDownitem(item, 2)"
                                                    style="padding-right: 20px;color: #00C2FF;">工艺控制</span>
                                                <span @click="arrowDownitem(item, 3)"
                                                    style="color: aquamarine;">数据分析</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dap_right">
                    <div class="mapleft_card ">
                        <div class="maptitle">
                            <div style="display: flex;justify-content: space-between;">
                                <div style="margin-right: 50px;">处理水量</div>
                                <div @click="timeShuiliang(1)" style="margin-right: 20px;color:#779DFF">查询</div>
                                <!-- <div
                                    style="background-color: rgba(0, 170, 255, 0.3);margin-top: -5px;margin-right: -10px;">
                                    <el-date-picker @change="dataTimeChange" style="width: 300px;" v-model="valueData"
                                        type="daterange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div> -->
                            </div>
                        </div>
                        <div>
                            <barMapGeeChart :height="'22vh'" :valueTimes="valueData" />
                        </div>
                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle">运维记录</div>
                        <div class="maptableright">
                            <div class="maptable_list">
                                <div class="maptable_li1One" style="justify-content: center;">站点名称</div>
                                <div class="maptable_li2One">运维时间</div>
                                <div class="maptable_li3One">运维人员</div>
                            </div>
                            <div style="height: 16vh; overflow-x: hidden;  overflow-y: auto;">
                                <AutoScrollModel height="16vh" :scrollSpeed="0.1" :bottomPause="1000"
                                    :smoothReturn="false" :minDelta="0.1">
                                    <div @click="getMaintenanceFun(item.maintenanceId)" class="maptable_list"
                                        :key="index" v-for="(item, index) of mapInspectionRightOne">
                                        <div class="maptable_li1One">
                                            <!-- <img style="width: 18px;height: 18px;margin-right: 4px;"
                                        src="../imgUrl/maprihgtIocn.png" alt=""> -->
                                            <el-tooltip :content="item.groupName" placement="top-start">
                                                <div class="maptable_li1Text" style="text-align: left;"> {{
                                                    item.groupName
                                                    }}
                                                </div>
                                            </el-tooltip>
                                        </div>
                                        <div class="maptable_li2One" style="text-align:left;">{{ item.createTime }}
                                        </div>
                                        <div class="maptable_li3One">{{ item.maintenanceUser }}</div>
                                    </div>
                                </AutoScrollModel>
                            </div>

                        </div>

                    </div>
                    <div class="mapleft_card ">
                        <div class="maptitle" style="display: flex;cursor: pointer;color: #779DFF;">
                            <div @click="maptitleShishi(1)" :class="{ 'shishiText': shishiType == 1 }"
                                style="margin-right: 10px;">实时报警</div>
                            <div :class="{ 'shishiText': shishiType == 2 }" @click="maptitleShishi(2)">实时提醒 </div>
                        </div>
                        <div class="maptitleTopArel">
                            <div class="maptableright">

                                <AutoScrollModel v-if="shishiType == 1" height="22vh" :scrollSpeed="0.1"
                                    :bottomPause="1000" :smoothReturn="false" :minDelta="0.1">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspectionRight">
                                        <div class="maptable_li1">
                                            <img style="width: 18px;height: 18px;margin-right: 4px;"
                                                src="../imgUrl/maprihgtIocn.png" alt="">

                                            <el-tooltip :content="item.alertName" placement="top-start">
                                                <div class="maptable_li1Text"> {{ item.alertName }}</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="maptable_li2" style="text-align:left;">
                                            {{ item.modelName }}
                                        </div>
                                        <div class="maptable_li2" style="text-align:left;">{{ item.createTime }}
                                        </div>

                                        <div @click="maptableFun(item, 1)" class="maptable_li3">处理</div>
                                    </div>
                                </AutoScrollModel>
                                <AutoScrollModel v-if="shishiType == 2" height="22vh" :scrollSpeed="0.1"
                                    :bottomPause="1000" :smoothReturn="false" :minDelta="0.1">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of listRemindList">
                                        <div class="maptable_li1" style="background: rgba(0, 170, 255, 0.08);">
                                            <i v-if="isMoreThanThreeDaysAgo(item.remindDate)"
                                                style="font-size: 20px;color: red;" class="el-icon-warning-outline"></i>

                                            <el-tooltip :content="item.groupName" placement="top-start">
                                                <div class="maptable_li1Text"
                                                    :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }">
                                                    {{
                                                        item.groupName
                                                    }}</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="maptable_li2"
                                            :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                            style="text-align:left;background: rgba(0, 170, 255, 0.08);">
                                            <el-tooltip :content="item.content" placement="top-start">
                                                <div class="maptable_li1Text"> {{ item.content
                                                }}</div>
                                            </el-tooltip>

                                        </div>
                                        <div class="maptable_li2"
                                            :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                            style="text-align:left;background: rgba(0, 170, 255, 0.08);">
                                            {{ item.remindDate }}
                                        </div>

                                        <div @click="maptableFun(item, 2)"
                                            :class="{ 'groupTitle': isMoreThanThreeDaysAgo(item.remindDate) }"
                                            style="background: rgba(0, 170, 255, 0.08);" class="maptable_li3">处理</div>
                                    </div>
                                </AutoScrollModel>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="dap_food"></div>
        <!-- 添加或修改设备告警对话框 -->
        <el-dialog title="报警处理" :visible.sync="open" custom-class="customClass" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="处理结果" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="8" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加或修改设备告警对话框 -->
        <el-dialog title="运维信息" :visible.sync="omaintenanceOpen" custom-class="customClass" width="500px"
            append-to-body>
            <el-form ref="form" :model="maintenanceForm" label-width="auto" style="margin-bottom:30px;padding:20px">
                <el-form-item label="站点" prop="groupId">
                    <el-select style="width: 100%;" v-model="maintenanceForm.groupId" placeholder="请选择站点">
                        <el-option v-for="item in groupData" :key="item.groupId" :label="item.groupName"
                            :value="item.groupId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运维人员" prop="maintenanceUser">
                    <el-input v-model="maintenanceForm.maintenanceUser" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="运维时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"
                        v-model="maintenanceForm.createTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="整体运维">
                    <el-input style="margin-top: 10px;" v-model="maintenanceForm.maintenanceContent" type="textarea"
                        placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="风机运维">
                    <!-- <div @click="fanContentArrayAdd"
                        style="text-align: right;width: 100%;color: green;cursor: pointer;">新增运维内容
                    </div> -->
                </el-form-item>
                <el-form-item>
                    <div class="fanContentCss" :key="index" v-for="(item, index) of fanContentArray">
                        <div class="fanContentCssLeft">
                            <el-select style="width: 100%;" v-model="item.fanContent" placeholder="请选择风机" clearable>
                                <el-option v-for="dict in dict.type.maintenance_fan_device" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                            <el-input style="margin-top: 10px;" v-model="item.maintenanceContent" type="textarea"
                                placeholder="请输入内容" />
                        </div>
                        <!-- <div @click="fanContentArrayDel(index)" class="fanContentCssRight">
                            删除
                        </div> -->
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="omaintenanceOpen = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 时间查询 -->
        <el-dialog title="时间查询" :visible.sync="openTimePicker" custom-class="customClass" width="400px" append-to-body>
            <el-form ref="form">
                <el-form-item>
                    <el-date-picker @change="dataTimePickerChange" style="width: 100%;" v-model="valueTimesPicker"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitTimePicker">确 定</el-button>
                <el-button @click="openTimePicker = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import MapChart from './components/MapChart.vue'
import autoScroll from 'vue-list-auto-scroll-tsc'
import barMapChart from './components/barMapChart.vue'
import lineAndebarMapChart from './components/lineAndebarMapChart.vue'
import barMapGeeChart from './components/barMapGeeChart.vue'
import { allListGroup, siteTotalFlow } from '@/api/iot/group'
import { inspectionPlanRecord, getInspectionRecordListByGroupId, getCenterTotal, handleTotalFlow } from "@/api/site/isRecord";
import { listAlert } from '@/api/iot/alert';
import { listAlertLog, listBigDataAlertLog, updateAlertLog } from '@/api/iot/alertLog';
import { listMaintenance, getMaintenance } from "@/api/iot/maintenance";
import Screenfull from '@/components/Screenfull/screenFull.vue';
import AutoScrollModel from './model/autoScrollModel.vue';
import { listRemind, updateRemind } from "@/api/iot/remind";
export default {
    components: {
        MapChart,
        barMapChart,
        lineAndebarMapChart,
        barMapGeeChart,
        autoScroll,
        Screenfull,
        AutoScrollModel
    },
    dicts: ['district_selection', 'maintenance_fan_device'],
    data() {
        return {
            dayweather: '',
            daytemp: '',
            timeYear: '',
            timeMonth: '',
            timeDay: '',
            currentWeek: '',
            times: '',
            mapInspection: [],
            mapInspectionRight: [],
            centerList: [],
            arrowDownName: '',
            arrowDownID: '',
            groupData: [],
            arrowDownData: false,
            arrowDownDataQu: false,
            arrowDownQv: '全部区县',
            arrowDownQvId: '',
            groupName: '',
            // 表单参数
            form: {},
            // 是否显示弹出层
            open: false,
            // 表单校验
            rules: {
                remark: [
                    {
                        required: true,
                        message: '处理内容不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            mapInspectionClose: [],
            isInfoForm: {
                groups: 0,
                onLineNum: 0,
                outLineNum: 0,
                sipNum: 0,
                outLineDevice: []
            },
            handleTotalFlowForm: {
                cumulative: 0,
                yesterday: 0,
            },
            carouselArray: [],
            siteTotalFlowlist: [],
            mapInspectionRightOne: [],
            isScrollingDown: true,
            scrollAnimationFrameId: null,
            isAutoScrollRunning: false,
            accumulatedDelta: 0, // 累积小数增量
            isScrollingDownTwo: true,
            scrollAnimationFrameIdTwo: null,
            isAutoScrollRunningTwo: false,
            accumulatedDeltaTwo: 0, // 累积小数增量
            maintenanceForm: {
                groupId: '',
                maintenanceUser: '',
                createTime: '',
            },
            omaintenanceOpen: false,
            fanContentArray: [],
            omaintenanceId: '',
            valueData: [],
            openTimePicker: false,
            valueTimesPicker: [],
            typeTimePicker: 1,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            shishiType: 1,
            typeForm: 1,
            listRemindList: []
        }
    },
    mounted() { },
    created() {
        this.listMaintenanceFun();
        this.siteTotalFlowFun();
        this.mapFun();
        this.dateFormat();
        this.listGroupFun();
        this.inspectionPlanRecordFun();
        // this.inspectionPlanRecordCloseFun();
        this.listAlertFun();
        this.isInfoFun();
        this.handleTotalFlowFun();
        this.listRemindFun();
    },
    methods: {
        isMoreThanThreeDaysAgo(date) {
            // 获取当前日期
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 清除时分秒，只保留日期

            // 创建传入日期的Date对象
            const targetDate = new Date(date);
            targetDate.setHours(0, 0, 0, 0); // 清除时分秒，只保留日期

            // 计算时间差（毫秒）
            const timeDiff = targetDate.getTime() - today.getTime();
            // 将时间差转换为天数
            const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

            // 判断目标日期是否早于今天且差距大于 3 天
            return dayDiff <= 3;
        },
        listRemindFun() {
            listRemind({
                pageNum: 1,
                pageSize: 30,
                isFinish: 0,
            }).then(res => {
                this.listRemindList = res.rows;
            })
        },
        timeShuiliang(type) {
            this.typeTimePicker = type;
            this.openTimePicker = true;
            this.valueTimesPicker = [];
        },
        dataTimePickerChange(e) {
            if (e) {
                this.valueTimesPicker = e;
            } else {
                this.valueTimesPicker = [];
            }
        },
        submitTimePicker() {
            if (this.typeTimePicker == 1) {
                this.valueData = this.valueTimesPicker;
            }
            this.openTimePicker = false;
        },
        dataTimeChange(e) {
            if (e) {
                this.valueData = e;
            } else {
                this.valueData = [];
            }
        },
        listMaintenanceFun() {
            listMaintenance({
                pageNum: 1,
                pageSize: 100,
            }).then(res => {

                this.mapInspectionRightOne = res.rows;
            })
        },
        getMaintenanceFun(id) {
            getMaintenance(id).then(res => {
                if (res.code == 200) {
                    this.maintenanceForm = res.data;
                    this.omaintenanceOpen = true;
                    this.fanContentArray = JSON.parse(this.maintenanceForm.fanContent);
                }
            })
        },
        siteTotalFlowTimesFun(e) {
            siteTotalFlow({
                startTime: e[0],
                endTime: e[1]
            }).then(res => {
                if (res.code == 200) {
                    this.siteTotalFlowlist = res.data
                }
            })
        },
        /**
 * 计算数组对象里特定字段的数值总和
 * @param {Array} arr - 包含对象的数组
 * @param {String} field - 需要求和的字段名
 * @returns {Number} - 总和
 */
        sumArrayObjectValues(arr, field) {
            return arr.reduce((sum, item) => {
                // 检查字段值是否为有效的数字
                const value = parseFloat(item[field]);
                return sum + (isNaN(value) ? 0 : value);
            }, 0);
        },
        siteTotalFlowFun() {
            siteTotalFlow().then(res => {
                if (res.code == 200) {
                    this.siteTotalFlowlist = res.data

                    this.siteTotalFlowlist.unshift({
                        group_name: '平桥区25个农污处理站点',
                        cumulative: this.sumArrayObjectValues(this.siteTotalFlowlist, 'cumulative'),
                        yesterday: this.sumArrayObjectValues(this.siteTotalFlowlist, 'yesterday'),
                        shunshi: this.sumArrayObjectValues(this.siteTotalFlowlist, 'shunshi'),
                    })


                }
            })
        },
        handleTotalFlowFun() {
            handleTotalFlow().then(res => {
                this.handleTotalFlowForm = res.data
            })
        },
        isInfoFun() {
            getCenterTotal().then(res => {
                if (res.code == 200) {
                    this.isInfoForm = res.data
                }
            })

        },
        listAlertFun() {
            listBigDataAlertLog({
                pageNum: 1,
                pageSize: 30,
                status: 2
            }).then(res => {
                if (res.code == 200) {
                    this.mapInspectionRight = res.rows
                }
            })
        },
        inspectionPlanRecordFun() {
            getInspectionRecordListByGroupId({
                inspectionStatus: 'Y'
            }).then(res => {

                if (res.code == 200) {


                    this.mapInspection = res.data
                }
            })
        },
        inspectionPlanRecordCloseFun() {
            getInspectionRecordListByGroupId({
                inspectionStatus: 'N'
            }).then(res => {

                if (res.code == 200) {
                    this.mapInspectionClose = res.data
                }
            })
        },
        dateFormat() {
            const updateTime = () => {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
                var currentWeek = weekDays[date.getDay()];
                this.timeYear = year;
                this.timeMonth = month;
                this.timeDay = day;
                this.currentWeek = currentWeek;
                this.times = hours + ':' + minutes + ':' + seconds;
            };

            // 初始化时间
            updateTime();

            // 每秒更新一次时间
            setInterval(updateTime, 1000);
            // 拼接
            // return year + "年" + month + "月" + day + "日" + " " + currentWeek + " " + hours + ":" + minutes;
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        mapviewBtnFun(data) {

            this.mapFoodBtn(data)
        },
        mapFoodBtn(data) {
            this.$emit('success1', data)
        },
        mapClocse() {
            window.close();
        },
        arrowDownFun() {
            this.arrowDownDataQu = false
            this.arrowDownData = !this.arrowDownData
        },
        arrowDownitem(item, type) {
            this.arrowDownID = item.guid
            localStorage.setItem('arrowDownName', item.groupName)
            localStorage.setItem('groupId', item.groupId)
            // this.arrowDownName = item.pageName
            this.arrowDownData = false
            this.$emit('success1', {
                type: type,
                id: item.groupId
            })

        },
        groupArrayByThree(arr) {
            const result = [];
            for (let i = 0; i < arr.length; i += 3) {
                result.push(arr.slice(i, i + 3));
            }
            return result;
        },
        listGroupFun() {
            let pamse = {
                groupName: this.groupName,
                areaName: this.arrowDownQvId
            }
            allListGroup(pamse).then((res) => {
                let arr = []
                for (let item of res.data) {
                    if (item.groupId != 29) {
                        arr.push(item)
                    }
                }

                this.groupData = arr
                this.carouselArray = arr
            })
        },
        arrowDownQvFun() {
            this.arrowDownData = false
            this.arrowDownDataQu = !this.arrowDownDataQu
        },
        arrowDownQu(item) {
            this.arrowDownDataQu = false
            this.arrowDownData = true
            this.arrowDownQv = item.label
            this.arrowDownQvId = item.value
            this.listGroupFun()
        },
        groupInput() {
            this.arrowDownData = true
            this.listGroupFun()
        },
        maptableFun(item, type) {
            this.open = true;
            this.form = item;
            this.typeForm = type;
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.form = {
                remark: '',
            };
        },
        // 确认按钮
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.typeForm == 1) {
                        updateAlertLog(this.form).then((response) => {
                            this.$modal.msgSuccess('处理成功');
                            this.open = false;
                            this.listAlertFun();
                        });
                    }
                    if (this.typeForm == 2) {
                        this.form.isFinish = 1;
                        updateRemind(this.form).then((response) => {
                            this.$modal.msgSuccess('提醒处理成功');
                            this.open = false;
                            this.listRemindFun();
                        });
                    }

                }
            });
        },
        maptitleShishi(type) {
            this.shishiType = type;
        }

    },
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.pageWarp {
    width: 100vw;
    height: 100vh;
    background-image: url(../imgModel/dapBj.png);
    background-size: 100% 100%;
}

.dap_food {
    width: 100vw;
    height: 6vh;
    background-image: url(../imgModel/imgfood.png);
    background-size: 100% 100%;
    position: fixed;
    bottom: 0;
}

.dap_warp {
    width: 100vw;

    .dap_header {
        width: 100%;
        background-image: url(../imgModel/imgHeader.png);
        background-size: 100% 100%;
        height: 10vh;
        display: flex;

        .header_left {
            width: 28vw;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 18px;
            color: #FFFFFF;
            text-align: left;
            line-height: 50px;
            padding-left: 20px;
        }

        .header_centeer {
            flex: 1;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 42px;
            color: #FFFFFF;
            text-align: center;
            line-height: 82px;
        }

        .header_right {
            width: 28vw;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 18px;
            color: #779DFF;
            text-align: right;
            line-height: 50px;
            display: flex;
            justify-content: flex-end;

            .text {
                color: #FFFFFF;
                font-weight: 400;
            }

            .pading {
                padding-left: 20px;
            }

            .img {
                width: 38px;
                margin: 5px 20px;
            }
        }
    }

    .dap_bottom {
        display: flex;

        .dap_left {
            width: 25vw;
            padding: 0 0 0 20px;

        }

        .dap_right {
            width: 26vw;
            padding: 0 20px 0 0;
        }

        .dap_center {
            flex: 1;
            padding: 0 20px;

            .center_header {
                display: flex;

                .center_img {
                    width: 24%;
                    height: 11vh;
                    margin-right: 10px;
                    position: relative;

                    .center_text {
                        position: absolute;
                        top: 4%;
                        left: 11%;
                        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    .center_num {
                        position: absolute;
                        top: 50%;
                        right: 7%;
                        font-family: DINPro, DINPro;
                        font-weight: bold;
                        font-size: 20px;
                        color: #FFFFFF;
                    }
                }

                .center_img1 {
                    background-image: url(../imgModel/imgcenter01.png);
                    background-size: 100% 100%;
                }

                .center_img2 {
                    background-image: url(../imgModel/imgcenter02.png);
                    background-size: 100% 100%;
                }

                .center_img3 {
                    background-image: url(../imgModel/imgcenter03.png);
                    background-size: 100% 100%;
                }

                .center_img4 {
                    background-image: url(../imgModel/imgcenter04.png);
                    background-size: 100% 100%;
                }

                .center_img5 {
                    background-image: url(../imgModel/imgcenter06.png);
                    background-size: 100% 100%;
                }
            }


        }
    }

}

.maptitle {
    margin-left: 51px;
    padding-top: 9px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 18px;
    text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
    text-align: left;
    color: white;
}

.maptitleTop {
    margin-left: 11px;
    padding-top: 6px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 18px;
    text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
    text-align: left;
    color: white;


}

.maptitleTopul {
    display: flex;
    width: 100%;
    height: 28px;
    font-size: 14px;
    // background: rgba(0, 170, 255, 0.08);
    border-radius: 0px 0px 0px 0px;
    color: rgba(255, 255, 255, 1);
    // padding: 5px;
    margin-top: 3px;

    .maptitleTopLione {
        width: 130px;
        height: 26px;
        overflow: hidden;
        background: rgba(0, 170, 255, 0.08);
        text-align: center;
        padding-left: 10px;

        .maptable_li1Text {
            width: 100%;
            white-space: nowrap;
            /* 不换行 */
            overflow: hidden;
            /* 隐藏超出的内容 */
            text-overflow: ellipsis;
            /* 用省略号表示被隐藏的部分 */
        }
    }

    .maptitleTopLi {
        width: 20%;
        height: 26px;
        padding-left: 10px;
        line-height: 26px;
        margin-left: 5px;
        overflow: hidden;
        font-size: 14px;

        background: rgba(0, 170, 255, 0.08);
    }
}

.carouselWarp_ur {
    width: 33%;
    color: white;
    text-align: center;
}

.carouselWarp {
    width: 96%;
    display: flex;
    margin: 0px auto;
}

.mapleft_card {
    width: 100%;
    height: 26.5vh;
    background-image: url(../imgModel/imgDiv.png);
    background-size: 100% 100%;
    margin-bottom: 20px;
}

.maptitleTopCeneter {
    height: 53vh;
    overflow-x: hidden;
    overflow-y: auto;

    ::-webkit-scrollbar {
        display: none;
    }
}

.maptitleTopArel {
    height: 22vh;
    overflow-x: hidden;
    overflow-y: auto;

    ::-webkit-scrollbar {
        display: none;
    }
}


.mapleft_cardTop {
    width: 100%;
    height: 56.5vh;
    background-image: url(../imgUrl/mapvideobiank.png);
    background-size: 100% 100%;
    margin-bottom: 20px;
    padding: 0 10px 40px 10px;

}

.mapleft_one {
    display: flex;

    .one_left {
        width: 40%;
        text-align: center;

        .onimg {
            width: 40%;
            margin: 0px auto;
            margin-top: 20px;
        }

        .onText {
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
        }

        .onspan {
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 22px;
            color: #6BBEE4;
        }
    }

    .one_right {
        width: 60%;
        padding-top: 0px;

        .rightawrp {
            width: 98%;
            margin-top: 10px;
            position: relative;
        }

        .rightnum {
            position: absolute;
            top: 25%;
            right: 10%;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;

            .onspan {
                font-size: 16px;
                color: #AADCFF;
            }

            .twspan {
                font-size: 18px;
                color: #B6FFA7;
            }
        }
    }
}


.maptableleft {
    width: 96%;
    height: 21vh;
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;


    ::-webkit-scrollbar {
        display: none;
    }

}


.maptable_list {
    display: flex;
    width: 100%;
    height: 28px;
    font-size: 14px;

    border-radius: 0px 0px 0px 0px;
    color: rgba(255, 255, 255, 1);
    // padding: 5px;
    margin-top: 3px;

    .maptable_li {
        width: 33%;
        overflow: hidden;
    }
}

.maptableright {
    height: 21vh;
    overflow-x: hidden;
    // overflow-y: auto;
    text-align: center;
    padding: 10px;
    margin: 0px auto;

    ::-webkit-scrollbar {
        display: none;
    }

    .maptable_list {
        display: flex;
        width: 100%;
        height: 26px;
        font-size: 14px;
        border-radius: 0px 0px 0px 0px;
        color: rgba(255, 255, 255, 1);
        padding: 5px;
        margin-top: 3px;

        .maptable_li1 {
            width: 130px;
            height: 26px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright002.png);
            text-align: center;
            display: flex;
            padding: 3px 10px;


            .maptable_li1Text {
                width: 120px;
                white-space: nowrap;
                /* 不换行 */
                overflow: hidden;
                /* 隐藏超出的内容 */
                text-overflow: ellipsis;
                /* 用省略号表示被隐藏的部分 */
            }
        }

        .maptable_li2 {
            flex: 1;
            height: 26px;
            padding-left: 10px;
            line-height: 26px;
            margin-left: 5px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright002.png);
        }

        .maptable_li3 {
            width: 50px;
            height: 26px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright002.png);
            text-align: center;
            display: flex;
            padding: 3px 10px;
            margin-left: 5px;
            cursor: pointer;
        }
    }
}

::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.center_food {
    position: relative;
    overflow: hidden;
}

.center_food_sel {
    position: absolute;
    top: 20px;
}

.groupNameClass {
    width: 250px;
    /* 强制文本单行显示 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 显示省略号 */
    text-overflow: ellipsis;
}

.arrowDownUr {
    width: 100%;

    background-color: rgba(0, 55, 86, 0.60);
    height: 300px;
    border-radius: 5px;
    overflow-y: scroll;
    position: absolute
}

.arrowDownLiQu {
    width: 100%;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;

    &:hover {
        background-color: rgba(0, 55, 86, 0.9);
    }
}

.arrowDownLi {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    cursor: pointer;

    &:hover {
        background-color: rgba(0, 55, 86, 0.9);
    }
}

.arrowDownLiClick {
    color: #00C2FF;
}

::v-deep .el-input__inner {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5); // 去掉边框
    color: white;
}


::v-deep .el-dialog__header {
    background-color: rgba(0, 55, 86, 1);

    .el-dialog__title {
        color: white;
    }
}

::v-deep .el-dialog__body {
    background-color: rgba(0, 55, 86, 1);

    .el-dialog__title {
        color: white;
    }
}

::v-deep .el-dialog__footer {
    background-color: rgba(0, 55, 86, 1);
}

::v-deep .el-textarea__inner {
    background-color: rgba(0, 55, 86, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

::v-deep .el-range-input {
    background-color: rgba(0, 55, 86, 1);
    color: white;
}

::v-deep .el-form-item__label {
    color: white // 这里可以修改为你想要的颜色值
}

.maptable_li1One {
    flex: 1;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    text-align: center;
    display: flex;
    padding: 1px 10px;
    background: rgba(0, 170, 255, 0.08);

    .maptable_li1Text {
        width: 100%;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 用省略号表示被隐藏的部分 */
    }

}

.maptable_li2One {
    width: 160px;
    height: 26px;
    line-height: 26px;
    margin-left: 5px;
    overflow: hidden;
    padding-left: 10px;
    background: rgba(0, 170, 255, 0.08);
}

.maptable_li3One {
    width: 80px;
    height: 26px;
    overflow: hidden;
    text-align: center;
    display: flex;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
    background: rgba(0, 170, 255, 0.08);
}

.elIputGroup {
    ::v-deep .el-input__inner {
        border: none;
    }
}

.shishiText {
    color: #fff;
}

.groupTitle {
    color: red;
}
</style>
